<template>
	<view class="content">
		
		<view class="headImg">
			<image  class="img" :src="user.headUrl" mode="aspectFill"></image>
		</view>
		
		<view class="account">
			{{user.userAcc}}
		</view>
		<view class="title">
			{{subTitle}}
		</view>
		<hackout-draw-lock class="gesture">
			
		</hackout-draw-lock>
		
		<view class="bottom">
			<view class="forgetGesture" @click="toLogin">
				{{$t('gesturePwd.forgetGesturePwd')}}
			</view>
			<view class="space">
				
			</view>
			<view class="fignerPrignt" @click="startFingerPrintAuthentication" v-if="fingerPrint">
				{{authType}}
			</view>
		</view>
	</view>
</template>

<script setup>
	import{onShow,onLoad,onUnload} from "@dcloudio/uni-app";
	import { ref } from "vue";
	import { getFingerPrintState, getGesturePwd, getUserInfo, logoutClearStorage } from "../../utils/user_tools";
	import { apiUserLogoutAccount } from "../../api/user_api";
	import {i18nTool} from '../../utils/i18en';
	const user = ref(null)
	var subTitle = ref(i18nTool('gesturePwd.inputGesturePwd'));
	var count = ref(5);
	var fingerPrint = ref(null);
	var supportSoterAuthenticationArray = ref(null);
	var authType = ref(null);
	
	//检查是否支持指纹
	const checkIsSupportSoterAuthentication = () => {
		uni.checkIsSupportSoterAuthentication({
			success(res) {
				supportSoterAuthenticationArray.value = res.supportMode;
				if(supportSoterAuthenticationArray.value.includes('fingerPrint')){
					authType.value = i18nTool('gesturePwd.authFingerContent')
				}else if(supportSoterAuthenticationArray.value.includes('facial')){
					authType.value = i18nTool('gesturePwd.authFaceContent')
				}
			}
		})
	}
	
	const startFingerPrintAuthentication = ()=>{
			uni.startSoterAuthentication({
				requestAuthModes:supportSoterAuthenticationArray.value,
				challenge: '1234567890', 
				authContent: i18nTool('gesturePwd.please')+authType.value,
				success(res) {
					uni.showToast({
						icon: 'none',
						title:i18nTool('gesturePwd.verifySuccess') 
					});
					uni.reLaunch({
						url:"/pages/map/map"
					});
				},
				fail(err) {
					uni.showModal({
						content:i18nTool('gesturePwd.verifyFail'),'errCode': + err.errCode, 
						showCancel: false
					});
				},
			});
			
	}
	
	onShow(()=>{
		user.value = getUserInfo();
		fingerPrint.value = getFingerPrintState();
		checkIsSupportSoterAuthentication();

		uni.$on("change", function(data) {
		
			count.value --;
			if(getGesturePwd() == JSON.stringify(data)){
				uni.reLaunch({
					url:"/pages/map/map"
				});
			}else{
				
				if(count.value ==0){
					uni.showModal({
						confirmText: i18nTool('gesturePwd.retryLogin') ,
						title: i18nTool('gesturePwd.retrySetGesture') ,
						showCancel:false,
						success(res) {
							if (res.confirm) {
								logoutRequest();
							} else {
					
							}
						}
					})
				}else{
					subTitle.value =  i18nTool('gesturePwd.errGesturePwd')+count.value;
				}
			
			}
		})
	})
	onUnload(() => {
		uni.$off("change");
	})
	
	
	function toLogin(){
		
		uni.showModal({
			confirmText: i18nTool('gesturePwd.retryLogin') ,
			cancelText: i18nTool('gesturePwd.cancel'),
			title: i18nTool('gesturePwd.retrySetGesture'),
			success(res) {
				if (res.confirm) {
					logoutRequest();
				} else {
		
				}
			}
		})
	}
	
	async  function logoutRequest(){
		
		let res = await apiUserLogoutAccount();
		logoutClearStorage();
		uni.reLaunch({
			url:"/pages/login/login"
		})
	}
	
	
</script>

<style lang="scss" scoped>
	.content{
		display:flex;
		flex-direction: column;
		justify-content: center;
		align-items: center;
		.headImg{
			margin-top: 15%;
			width: 120rpx;
			height: 120rpx;
			border-radius: 50%;
			.img{
				width: 100%;
				height: 100%;
				border-radius: 50%;
			}
		}
		.account{
			margin-top: 20rpx;
			color: #333;
			font-size: 32rpx;
		}
		.title{
			margin-top: 15%;
			color: #333;
			font-size: 32rpx;
			text-align: center;
		}
		.gesture{
			margin-top: 20rpx;
			text-align: center;
		}
		.bottom{
			display: flex;
			flex-direction: row;
			align-items: center;
			justify-content: space-evenly;
			margin-bottom: 100rpx;
			padding-left: 60rpx;
			padding-right: 60rpx;
			.fignerPrignt{
				color: #333;
				font-size: 30rpx;
				text-align: right;
			}
			.space{
				width: 100rpx;
			}
			.forgetGesture{
				color: #333;
				font-size: 30rpx;
				
			}
		}
		
	}
</style>
